<template>
  <div class="tenant-package">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>套餐管理</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="套餐配置" name="packageConfig">
            <div class="package-config-section">
              <div class="toolbar">
                <el-button type="primary" @click="handleCreatePackage">新增套餐</el-button>
                <el-button @click="handleRefresh">刷新</el-button>
              </div>
              
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="card-header">
                    <span>套餐列表</span>
                  </div>
                </template>
                <el-table :data="packages" style="width: 100%">
                  <el-table-column prop="name" label="套餐名称" width="200" />
                  <el-table-column prop="code" label="套餐编码" width="120" />
                  <el-table-column prop="type" label="套餐类型" width="120" />
                  <el-table-column prop="price" label="价格(元/月)" width="120" />
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="描述" />
                  <el-table-column label="操作" width="200">
                    <template #default="scope">
                      <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                      <el-button size="small" @click="handleViewDetails(scope.row)">详情</el-button>
                      <el-button 
                        size="small" 
                        :type="scope.row.status === '启用' ? 'danger' : 'success'"
                        @click="handleChangeStatus(scope.row)"
                      >
                        {{ scope.row.status === '启用' ? '停用' : '启用' }}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="套餐定价" name="packagePricing">
            <div class="package-pricing-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>定价策略</span>
                  </div>
                </template>
                <el-form :model="pricingForm" label-width="120px">
                  <el-form-item label="套餐选择">
                    <el-select v-model="pricingForm.packageId" placeholder="请选择套餐" @change="loadPackageDetails">
                      <el-option
                        v-for="item in packages"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="基础价格">
                    <el-input-number v-model="pricingForm.basePrice" :min="0" :step="100" />
                  </el-form-item>
                  
                  <el-form-item label="计费周期">
                    <el-radio-group v-model="pricingForm.billingCycle">
                      <el-radio label="monthly">月付</el-radio>
                      <el-radio label="quarterly">季付</el-radio>
                      <el-radio label="yearly">年付</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <el-form-item label="折扣策略">
                    <el-table :data="discountStrategies" style="width: 100%">
                      <el-table-column prop="condition" label="条件" width="200">
                        <template #default="scope">
                          <el-input v-model="scope.row.condition" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="discount" label="折扣(%)" width="120">
                        <template #default="scope">
                          <el-input-number v-model="scope.row.discount" :min="0" :max="100" />
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="100">
                        <template #default="scope">
                          <el-button size="small" type="danger" @click="removeDiscount(scope.$index)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-button style="margin-top: 10px;" @click="addDiscount">添加折扣策略</el-button>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="savePricing">保存定价</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="功能权限配置" name="featurePermissions">
            <div class="feature-permissions-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>功能权限配置</span>
                  </div>
                </template>
                <el-form :model="permissionForm" label-width="120px">
                  <el-form-item label="套餐选择">
                    <el-select v-model="permissionForm.packageId" placeholder="请选择套餐" @change="loadPackagePermissions">
                      <el-option
                        v-for="item in packages"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="功能模块">
                    <el-tree
                      ref="featureTreeRef"
                      :data="featureTree"
                      show-checkbox
                      node-key="id"
                      :default-checked-keys="permissionForm.checkedFeatures"
                      :props="{
                        children: 'children',
                        label: 'label'
                      }"
                    />
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="savePermissions">保存权限</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="使用量限制" name="usageLimits">
            <div class="usage-limits-section">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <span>使用量限制配置</span>
                  </div>
                </template>
                <el-form :model="usageForm" label-width="120px">
                  <el-form-item label="套餐选择">
                    <el-select v-model="usageForm.packageId" placeholder="请选择套餐" @change="loadPackageLimits">
                      <el-option
                        v-for="item in packages"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="资源限制">
                    <el-table :data="usageLimits" style="width: 100%">
                      <el-table-column prop="resource" label="资源" width="200" />
                      <el-table-column prop="limit" label="限制值">
                        <template #default="scope">
                          <el-input-number v-model="scope.row.limit" :min="0" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="unit" label="单位" width="100" />
                      <el-table-column prop="description" label="说明" />
                    </el-table>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="saveUsageLimits">保存限制</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('packageConfig')

// 套餐数据
const packages = ref([
  {
    id: 1,
    name: '基础版',
    code: 'BASIC',
    type: '标准套餐',
    price: 99,
    status: '启用',
    description: '适合小型企业使用的基础功能'
  },
  {
    id: 2,
    name: '专业版',
    code: 'PRO',
    type: '标准套餐',
    price: 299,
    status: '启用',
    description: '适合中型企业使用的专业功能'
  },
  {
    id: 3,
    name: '企业版',
    code: 'ENTERPRISE',
    type: '定制套餐',
    price: 999,
    status: '启用',
    description: '适合大型企业使用的全部功能'
  }
])

// 定价表单
const pricingForm = reactive({
  packageId: '',
  basePrice: 0,
  billingCycle: 'monthly'
})

// 折扣策略
const discountStrategies = ref([
  {
    condition: '购买12个月',
    discount: 10
  },
  {
    condition: '购买24个月',
    discount: 15
  }
])

// 权限表单
const permissionForm = reactive({
  packageId: '',
  checkedFeatures: []
})

// 功能树
const featureTree = ref([
  {
    id: 1,
    label: '销售管理',
    children: [
      {
        id: 11,
        label: '销售订单'
      },
      {
        id: 12,
        label: '客户管理'
      }
    ]
  },
  {
    id: 2,
    label: '采购管理',
    children: [
      {
        id: 21,
        label: '采购订单'
      },
      {
        id: 22,
        label: '供应商管理'
      }
    ]
  },
  {
    id: 3,
    label: '库存管理',
    children: [
      {
        id: 31,
        label: '商品管理'
      },
      {
        id: 32,
        label: '库存调拨'
      }
    ]
  }
])

// 使用量表单
const usageForm = reactive({
  packageId: ''
})

// 使用量限制
const usageLimits = ref([
  {
    resource: '用户数量',
    limit: 10,
    unit: '个',
    description: '系统允许的最大用户数量'
  },
  {
    resource: '存储空间',
    limit: 100,
    unit: 'GB',
    description: '分配给租户的存储空间'
  },
  {
    resource: 'API调用次数',
    limit: 10000,
    unit: '次/天',
    description: '每日API调用次数限制'
  }
])

// 方法
const handleCreatePackage = () => {
  ElMessage.info('新增套餐')
}

const handleRefresh = () => {
  ElMessage.info('刷新套餐列表')
}

const handleEdit = (row: any) => {
  ElMessage.info(`编辑套餐: ${row.name}`)
}

const handleViewDetails = (row: any) => {
  ElMessage.info(`查看套餐详情: ${row.name}`)
}

const handleChangeStatus = (row: any) => {
  row.status = row.status === '启用' ? '停用' : '启用'
  ElMessage.success(`${row.name} 状态已更新为${row.status}`)
}

const loadPackageDetails = (packageId: string) => {
  ElMessage.info(`加载套餐详情: ${packageId}`)
}

const addDiscount = () => {
  discountStrategies.value.push({
    condition: '',
    discount: 0
  })
}

const removeDiscount = (index: number) => {
  discountStrategies.value.splice(index, 1)
}

const savePricing = () => {
  ElMessage.success('定价策略保存成功')
}

const loadPackagePermissions = (packageId: string) => {
  ElMessage.info(`加载套餐权限: ${packageId}`)
}

const savePermissions = () => {
  ElMessage.success('权限配置保存成功')
}

const loadPackageLimits = (packageId: string) => {
  ElMessage.info(`加载套餐限制: ${packageId}`)
}

const saveUsageLimits = () => {
  ElMessage.success('使用量限制保存成功')
}
</script>

<style scoped>
.tenant-package {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.toolbar {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style>